<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Error Capture</title>
    </head>
    <body>
        <h1>Error Capture</h1>
        <div id="app">
            count: {{ count }}
            <Son></Son>
        </div>
        <script src="../dist/vue-2.6.14.js"></script>
        <script>
            Vue.config.errorHandler = function (err, vm, info) {
                debugger;
                console.log(err, vm, info);
            };

            const Son = {
                template: `<div>
                        <h2>Son component</h2>
                        <button @click="onClick">click to trigger error</button>
                    </div>`,

                created() {
                    console.log('son created');
                },
                mounted() {
                    console.log('son mounted');
                },

                errorCaptured(error, vm, info) {
                    debugger;
                    console.log('son errorCaptured', error, vm, info);
                },

                methods: {
                    onClick() {
                        console.log('click it');
                        throw new Error('error from click son');
                    },
                },
            };

            new Vue({
                el: '#app',
                data() {
                    return {
                        count: 1,
                    };
                },

                components: { Son },

                errorCaptured(error, vm, info) {
                    debugger;
                    console.log('parent errorCaptured', error, vm, info);
                },

                created() {
                    console.log('parent created');
                },
                mounted() {
                    console.log('parent mounted');
                },
            });
        </script>
    </body>
</html>
